import React from "react";
import "./avatar.scss"

interface Props {
    icon?: React.ReactNode,
    size?: 'small' | 'default' | 'large' | number,
    shape?: 'circle' | 'square',
    src?: string,
    srcSet?: string,
    alt?: string,
    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
}

const Avatar = ({ icon, size = "default", shape = "circle", src, srcSet, alt, fit = "cover" }: Props) => {
    const getSize = () => {
        if (typeof size === 'number') {
            return size + "px"
        } else {
            if (size === 'small') {
                return "var(--pe-small-height)"
            } else if (size === 'large') {
                return "var(--pe-large-height)"
            } else {
                return "var(--pe-default-height)"
            }
        }
    }

    return (
        <div className="pe-avatar" style={{ width: getSize(), height: getSize(), borderRadius: shape === "circle" ? `calc(${getSize()} / 2)` : "var(--pe-border-radius)" }}>
            {
                !src && icon ? (
                    <div className="pe-avatar-icon-box" style={{ fontSize: typeof icon === 'string' ? '14px' : 'var(--pe-avatar-size)' }}>
                        {icon}
                    </div>
                ) : null
            }
            {
                src ? (
                    <div className="pe-avatar-img-box">
                        <img className="pe-avatar-img" style={{ objectFit: fit }} src={src} alt={alt} srcSet={srcSet} />
                    </div>
                ) : null
            }
        </div>
    )
}

export default Avatar